<template>
    <div id="chatAdd">
        <div class="top">

             <div class="item">
                <span>碎言碎言：</span>
                <Input type="textarea" :rows="4" style="width: 300px" v-model="info.text" />
            </div>

             <div class="item">
                <span>上传图片：</span>
                <el-upload
                    class="avatar-uploader"
                    action="http://www.guoqi666.work/api/chat/addChat.php"
                    :show-file-list="false"
                    :limit = '1'
                    :before-upload="beforeAvatarUpload">
                    <img v-if="info.imageUrl" :src="info.imageUrl" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </div>

            <div class="item">
               <Button type="primary"  style="width: 150px;margin-left:93px ;" @click="save_info">确定</Button>
                <Button type="warning" style="width: 150px;margin-left:5px ;" @click = "back">返回</Button>
            </div>
        </div>
    </div>
</template>

<script>
import {addChat} from '@/network/allMessage/chat'
export default {
    name:'chatAdd',
    //注入reload
    inject:['reload'],
    data(){
        return{
            info:{
                imageUrl:'',
                text:'',
                imgFile:'',
                time:''
            }
        }
    },
    methods:{
        back(){
             this.$router.go(-1);//返回上一层
        },
        save_info(){
            if(this.info.text == '' || this.info.imageUrl == ''){
                this.$message({
                    message: '两项信息都不能为空!!!',
                    type: 'warning'
                })
            }else{
                let newDate = new Date()
                let newYear= newDate.getFullYear() //获取完整的年份(4位)
                let newMonth = newDate.getMonth() + 1  //获取当前月份(0-11,0代表1月)
                let newDay = newDate.getDate() //获取当前日(1-31)
                this.info.time = newYear +'-'+ newMonth +'-'+ newDay
                let param = new FormData() //创建form对象
                param.append('imgFile',this.info.imgFile)
                param.append('text',this.info.text)
                param.append('time',this.info.time)

                addChat(param).then( res => {
                    this.$Message.success('添加成功');
                    this.info.imageUrl = ''
                    this.info.text = ''
                    this.reload()
                }).catch( err => {
                    console.log(err)
                })
            }
           
        },
        //上传文件之前的钩子
        beforeAvatarUpload(file){
            const isLt2M = file.size / 1024 / 1024 < 2;
            if (!isLt2M) {
                this.$message.error('上传图片大小不能超过 2MB!');
            }else{
                this.info.imgFile = file
                let reads = new FileReader()
                reads.readAsDataURL(file)
                let that = this
                reads.onload = function(e){
                    let url = e.target.result
                    that.info.imageUrl = url
                }
            }

            
        }
    }
}
</script>

<style lang="scss" scoped>
.item{
    margin: 10px 0;
    span{
        display: inline-block;
        width: 100px;
        font-size: 14px;
        font-weight: bold;
    }
}
.avatar-uploader{
    display: inline-block;
    width: 300px;
    height: 150px;
    border-radius: 6px;
    border: 1px dashed #d9d9d9;
}
.avatar-uploader:hover{
    border-color: #409EFF;
}
.avatar-uploader img{
    width: 298px;
    height: 148px;
    float: left;
}
.avatar-uploader-icon{
    line-height: 150px;
    text-align: center;
    width: 298px;
    font-size: 25px;
}
</style>